<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex justify-between h-3">
        <span>快捷入口</span>
      </div>
    </template>
    <div class="flex flex-row flex-wrap justify-between gap-6">
      <div
        v-for="menu in menuList"
        :key="menu.name"
        class="h-20 flex flex-col cursor-pointer items-center justify-center gap-2"
        @click="handleMenuClick(menu.routerName)"
      >
        <div
          :class="menu.bgColor"
          class="h-48px w-48px flex items-center justify-center rounded text-white"
        >
          <Icon :icon="menu.icon" class="text-7.5!" />
        </div>
        <span>{{ menu.name }}</span>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { checkRole } from '@/utils/permission'

defineOptions({ name: 'ShortcutCard' })

const menuList = ref<any[]>([])
const commonMenus = [
  {
    name: '店铺管理',
    icon: 'ep:shop',
    bgColor: 'bg-rose-400',
    routerName: 'ShopInfo'
  },
  {
    name: '产品分类',
    icon: 'ep:cellphone',
    bgColor: 'bg-pink-400',
    routerName: 'ProductCategory'
  },
  {
    name: '产品管理',
    icon: 'ep:goods',
    bgColor: 'bg-yellow-400',
    routerName: 'ProductSpu'
  },
  {
    name: '赠品活动',
    icon: 'fa:gift',
    bgColor: 'bg-purple-800',
    routerName: 'GiftActivity'
  },
  {
    name: '优惠券管理',
    icon: 'ep:ticket',
    bgColor: 'bg-purple-400',
    routerName: 'PromotionCouponTemplate'
  },
  {
    name: '订单管理',
    icon: 'ep:list',
    bgColor: 'bg-blue-400',
    routerName: 'TradeOrder'
  },
  {
    name: '评价管理',
    icon: 'ep:comment',
    bgColor: 'bg-orange-800',
    routerName: 'ProductComment'
  },
  {
    name: '售后管理',
    icon: 'ri:refund-2-line',
    bgColor: 'bg-teal-400',
    routerName: 'TradeAfterSale'
  },
  {
    name: '核销管理',
    icon: 'ep:money',
    bgColor: 'bg-cyan-400',
    routerName: 'TradeVerifyRecord'
  }
]

onMounted(() => {
  const hasRole = checkRole(['super_admin', 'platform_adminn', 'tenant_admin'])
  console.log('has admin role: ' + hasRole)
  if (hasRole) {
    menuList.value = [
      {
        name: '用户管理',
        icon: 'ep:avatar',
        bgColor: 'bg-yellow-800',
        routerName: 'MemberUser'
      },
      ...commonMenus
    ]
  } else {
    menuList.value = commonMenus
  }
})

/**
 * 跳转到菜单对应页面
 *
 * @param routerName 路由页面组件的名称
 */
const router = useRouter()
const handleMenuClick = (routerName: string) => {
  router.push({ name: routerName })
}
</script>
